<template>
  <div id="mainbox">
    <el-container>
      <el-aside width="220px">
        <myaside ref="myaside" @create="handleCreateOne" @select="handleNodeClick"></myaside>
      </el-aside>

      <el-container class="el-container" v-loading="pageLoading">
        <el-header class="el-header">
          <myhead></myhead>
        </el-header>

        <el-main class="el-main">
          <mycontentApprover v-if="pageType==='approver'" :id="id" @refresh="handleRefresh"></mycontentApprover>
          <mycontentInitiator
            v-else-if="pageType"
            :id="id"
            :pageType="pageType"
            @refresh="handleRefresh"
          ></mycontentInitiator>
          <div v-else></div>
        </el-main>

        <!-- <el-footer v-show="!loading" style="background-color: #586373;">
          <myfoot></myfoot>
        </el-footer>-->
      </el-container>
    </el-container>
    <publicComponent
      :msgConfig="publicComponentObj.msgConfig"
      :confirmConfig="publicComponentObj.confirmConfig"
    ></publicComponent>
  </div>
</template>

<script>
import myaside from "@/layout/myaside";
import myhead from "@/layout/myhead";
import myfoot from "@/layout/myfoot";
import mycontentInitiator from "@/view/initiator";
import mycontentApprover from "@/view/approver";
import { ipcRenderer } from "electron";
export default {
  data() {
    return {
      publicComponentObj: {
        confirmConfig: {},
        msgConfig: {}
      },
      loading: true,
      pageLoading: false,
      id: null, // 请假单id
      pageType: null // create search 页面属性
    };
  },
  name: "",
  components: {
    myaside,
    myhead,
    myfoot,
    mycontentInitiator,
    mycontentApprover
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    // 初始化
    refresh() {
      this.loading = true;
      this.$refs.myaside.init();
      this.loading = false;
    },
    // 刷新页面
    handleRefresh(obj) {
      if (!obj.refresh) return;
      if (obj.id) {
        this.id = obj.id;
        this.pageType = "search";
        this.$refs.myaside.setActiveIndex(obj.id);
      }
      this.refresh();
    },
    // 菜单点击
    handleNodeClick(obj) {
      if (!obj.node) return;
      let { key, keyPath } = obj.node;
      this.id = key;
      if (keyPath[0] === "1") {
        this.pageType = "search"; // create search 页面属性
      }
      if (keyPath[0] === "2") {
        this.pageType = "approver"; // 审核
      }

      // console.log("菜单点击", key, keyPath);
    },
    // 创建表单
    handleCreateOne(obj) {
      if (!obj.create) return;
      this.id = "0";
      this.pageType = "create"; // create search 页面属性
      // console.log("创建表单");
    }
  }
};
</script>

<style scoped>
.el-container .el-header {
}
.el-container .el-main {
  /* background-color: #f2f6f7; */
  height: 600px;
  overflow: auto;
  width: calc(100% + 13px);
}
.el-container .el-main .content_box {
  width: 96%;
  margin: 20px auto 10px auto;
  border: 1px solid #e1eaf3;
  border-radius: 10px;
  background-color: #fff;
  height: 420px;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
#app,
#mainbox {
  height: 660px;
  overflow: hidden;
}
</style>
